<!DOCTYPE html>
<html>
<base href="${rc.contextPath}">
<head lang="en">
    <meta charset="utf-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
    <style>
        .searchable-select {
            width: 350px; /*设置下拉框宽度*/
            color: #000;
        }

    </style>
    <title>互联互通工具</title>
</head>
<body style="bgcolor: #f3f3f3;margin-left: 220px;">
<table style="margin-top: 20px;">
    <tr>
        <td width="300">
            <table>
                <tr>
                    <label style="width: 150px; height: 30px;">选择第三方运营商：</label>
                    <select id="operatorSelect">
                    </select> &nbsp;&nbsp;
                    <button type="button" class="btn btn-success"
                            id="getOperatorInfoBtn"/>
                    确定
                    </button>
                    <br/>
                </tr>
                <tr>
                    <td><label style="width: 150px; height: 30px;">operatorSecret：</label></td>
                    <td><input class="form-control" type="text"
                               style="width: 200px; height: 30px;" value="acb93539fc9bg78k"
                               id="operatorSecret"/></td>
                </tr>
                <tr>
                    <td>sigSecret：</td>
                    <td><input class="form-control" type="text"
                               style="width: 200px; height: 30px;" value="9af2e7b2d7562ad5"
                               id="sigSecret"/></td>
                </tr>
                <tr>
                    <td>aesSecret：</td>
                    <td><input class="form-control" type="text"
                               style="width: 200px; height: 30px;" value="a2164ada0026ccf7"
                               id="aesSecret"/></td>
                </tr>
                <tr>
                    <td>aesIv：</td>
                    <td><input class="form-control" type="text"
                               style="width: 200px; height: 30px;" value="82c91325e74bef0f"
                               id="aesIv"/></td>
                </tr>
                <tr>
                    <td>operatorId:</td>
                    <td><input class="form-control" type="text"
                               style="width: 200px; height: 30px;" value="395815801"
                               id="operatorId"/></td>
                </tr>
            </table>
        </td>
        <td><label style="width: 150px; height: 30px;">获取请求参数示例：</label><select id="dataType">
            <option value="1">获取token</option>
            <option value="2">站点查询</option>
            <option value="3">站点状态查询</option>
            <option value="4">状态</option>
            <option value="5">订单</option>
            <option value="11">设备认证</option>
            <option value="12">电价策略</option>
            <option value="14">启动充电</option>
            <option value="15">启动充电回调</option>
            <option value="155">查询充电中状态</option>
            <option value="16">停止充电</option>
            <option value="17">停车场充电订单查询</option>
        </select> &nbsp;&nbsp;
            <button type="button" class="btn btn-success" id="getEmp"/>
            获取
            </button> <br/> <textarea style="width: 700px;margin-right: 50px;height: 170px;"
                                      id="dataEg"></textarea>
        </td>
    </tr>

    <tr>
        <td>请求数据：<br/> <textarea style="width: 700px;margin-right: 50px; height: 200px;"
                                 id="dataReq"></textarea></td>
        <td>返回数据：<br/> <textarea style="width: 700px;margin-right: 50px; height: 200px;"
                                 id="dataRet"></textarea></td>
    </tr>
    <tr>
        <td height="40">
            <button type="button"
                    class="btnbtn-xs btn-success" id="button">请求加密
            </button>
        </td>
        <td>
            <button type="button" class="btnbtn-xs btn-success"
                    id="button2">结果解密
            </button>
        </td>
    </tr>
    <tr>
        <td>请求数据加密：<br/> <textarea style="width: 700px;margin-right: 50px; height: 200px;"
                                   id="dataReqEncode"></textarea></td>
        <td>返回数据解密：<br/> <textarea style="width: 700px;margin-right: 50px; height: 200px;"
                                   id="dataRetDecode"></textarea></td>
    </tr>

</table>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>

<script type="text/javascript">
    $(function () {

    });

    $("#getEmp").click(function () {
        layer.load(1, {
            shade: [0.3, '#fff'],
            offset: ['400px', '900px']
        });
        $.post("/data/getReqExmp", {
            dataType: $("#dataType").val()
        }, function (data) {
            $("#dataEg").html(data);
            layer.closeAll();
        });
    });

    $("#button").click(function () {
        layer.load(1, {
            shade: [0.3, '#fff'],
            offset: ['400px', '900px']
        });
        $.post("/data/encode", {
            operatorSecret: $("#operatorSecret").val(),
            sigSecret: $("#sigSecret").val(),
            aesSecret: $("#aesSecret").val(),
            aesIv: $("#aesIv").val(),
            operatorId: $("#operatorId").val(),
            dataReq: $("#dataReq").val()
        }, function (data, status) {
            $("#dataReqEncode").html(data);
            layer.closeAll();
        });
    });

    $("#button2").click(function () {
        layer.load(1, {
            shade: [0.3, '#fff'],
            offset: ['400px', '900px']
        });
        $.post("/data/decode", {
            operatorSecret: $("#operatorSecret").val(),
            sigSecret: $("#sigSecret").val(),
            aesSecret: $("#aesSecret").val(),
            aesIv: $("#aesIv").val(),
            operatorId: $("#operatorId").val(),
            dataRet: $("#dataRet").val()
        }, function (data, status) {
            $("#dataRetDecode").html(JSON.stringify(data));
            layer.closeAll();
        });
    });

    // 运营商列表
    $.post("/data/getOperatorList", {}, function (data) {
        var html = "";
        html += "<option value=''>" + "请搜索或选择组织机构" + "</option>";
        for (var i = 0; i < data.length; i++) {
            html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
        }
        $("#operatorSelect").append(html);
        $('select').searchableSelect("{listWidth:'1000px'}");
    });

    $("#getOperatorInfoBtn").click(function () {
        layer.load(1, {
            shade: [0.3, '#fff'],
            offset: ['400px', '900px']
        });
        var id = $("#operatorSelect").val();
        if (id == '') {
            return;
        }
        $.post("/data/getOperatorInfo", {
            operatorId: id
        }, function (data, status) {
            var inSecret = $.parseJSON(data.inSecret);
            $("#operatorSecret").val(inSecret.operatorSecret);
            $("#sigSecret").val(inSecret.sigSecret);
            $("#aesSecret").val(inSecret.aesSecret);
            $("#aesIv").val(inSecret.aesIv);
            $("#operatorId").val(id);
            layer.closeAll();
        });
    });

</script>
</body>
</html>

